<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>阿里云盘下载</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-table.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/jquery.growl.css') }}">
    <style>
        .btn-save {
            margin: -5px 0 10px 10px;
        }
    </style>
</head>
<body>
{#导航#}
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/index">阿里云盘下载</a>
            <a class="navbar-brand" href="/ng" target="_blank">AriaNg</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">

            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if user %}
                    <li><p class="navbar-text">{{ user.user_name }}</p></li>
                    <li><p class="navbar-text">{{ user.nick_name }}</p></li>
                {% else %}
                    <li><a href="javascript:void(0);">扫一扫登录</a></li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>

<button type="button" class="btn btn-primary btn-save" data-toggle="modal" data-target="#myModal">
    新增分享地址
</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新增分享地址</h4>
            </div>
            <div class="modal-body">
                <form >
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">分享地址：</label>
                        <textarea id="url" rows="5" class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">分类名称：</label>
                        <label class="radio-inline">
                            <input type="radio" name="folder" value="电影"> 电影
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="folder" checked value="电视剧"> 电视剧
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="folder" value="动画片"> 动画片
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="folder" value="综艺"> 综艺
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="save()">保存</button>
            </div>
        </div>
    </div>
</div>
<table id="share-table">
</table>
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap3-typeahead.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap-table.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap-table-zh-CN.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.growl.js') }}"></script>
<script>
    $(function () {
        initTable()
    })

    function initTable() {
        $("#share-table").bootstrapTable('destroy').bootstrapTable({
            method: "get",
            url: "get_share_list",
            pageNumber: 1, //初始化加载第一页
            pagination: true,//是否分页
            sidePagination: 'client',//server:服务器端分页|client：前端分页
            pageSize: 10,//单页记录数
            pageList: [10, 20, 30],//可选择单页记录数
            queryParams: function (params) {//上传服务器的参数
                console.log(params)
                return {
                    page: params.offset / 10,
                    limit: params.limit  // 每页显示数量
                };
            },
            onLoadSuccess: function (res) {
                console.log(res);
            },
            onLoadError: function (err) {  //加载失败时执行
                console.log(err);
            },
            columns: [
                {
                    field: 'share_name', title: '文件名称', formatter: function (value, row) {
                        return `<a href="/files?share_id=${row.share_id}"  >${value}</a>`
                    }
                },
                {field: 'folder', title: '分类名称'},
                {
                    field: 'create_time', title: '创建时间', formatter: function (value) {
                        let d = new Date(value);
                        return dateFormat("YYYY-mm-dd HH:MM:SS", d);
                    }
                },
                {field: 'share_pwd', title: '分享密码'},
                {
                    field: 'share_id', title: '分享地址', formatter: function (value) {
                        let url = 'https://www.aliyundrive.com/s/'
                        return `<a href="${url}${value}" target="_blank">${url}${value}</a>`;
                    }
                },

                {
                    field: 'index',
                    title: '操作',
                    align: 'center',
                    events: window.shareEvents,
                    formatter: function (value, row) {
                        return '<a href="javascript:void(0);" class="btn btn-danger btn-xs remove" role="button">删除</a>'
                    }
                }
            ]
        });
    }

    window.shareEvents = {
        'click .remove': function (e, value, row) {
            $.post('/remove_share', {share_id: row.share_id}, function (res) {
                $.growl.notice({title: "成功提醒", message: '删除成功'});
                $("#share-table").bootstrapTable('remove', {
                    field: 'share_id',
                    values: row.share_id
                })
            });
        }
    }

    function save() {
        let url = $('#url').val();
        let folder = $('input[name="folder"]:checked').val()
        if (url === '') {
            $.growl.error({title: "错误提示", message: "请输入分享地址"});
            return;
        }
        $.post('/save_share', {url, folder}, function (res) {
            if (res.error !== '') {
                $.growl.error({title: "错误提醒", message: res.error});
                return;
            }
            $('#url').val("");
            $.growl.notice({title: "成功提醒", message: '保存成功'});
            $('#myModal').modal('toggle');
            initTable()
        });
    }

    function dateFormat(fmt, date) {
        let ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            }
        }
        return fmt;
    }
</script>
</body>
</html>